<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<th:block th:insert="~{window-title :: resource}" />
		<th:block th:insert="~{tmpl-head :: head}" />
		<th:block th:insert="~{tmpl-buttonclick-handler :: handler}" />
	</head>

	<body>
		<form action="#" method="get" id="outerForm">
		<input type="hidden" id="serverId" name="serverId" th:value="${serverId}"/>
		<input th:if="${_csrf} != null" type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
  
		<div th:replace="~{tmpl-navbar-top :: top}" ></div>
		
		<div class="container-fluid">
			<div class="row">

				<div th:replace="~{tmpl-navbar-left :: left}" ></div>

				<div class="col-sm-9 col-sm-offset-3 col-md-9 col-md-offset-3 main">

					<div th:replace="~{tmpl-banner :: banner}"></div>

					<!-- ********************************************************** -->
					<!-- ** Default Home                                         ** -->
					<!-- ********************************************************** -->

						<div class="card">
                     <div class="card-header">
							This is a RESTful server tester, which can be used to send
							requests to, and receive responses from the server at the
							following URL:
                        <a th:href="${base}" th:text="${base}"></a>
                     </div>
						</div>

						<!-- ************************************************ -->
						<!-- ** Resource Actions                           ** -->
						<!-- ************************************************ -->
						
						<div class="card" style="margin-top: 20px;" th:if="${resourceName.empty} == false">
							<h3 class="card-header panel-title" th:text="'Resource: ' + ${resourceName}">Resource: <b>Patient</b></h3>
							<div class="card-body">
								This page contains various operations for interacting with
								the <th:block th:text="${resourceName}"></th:block> resource.
							</div>
						</div>
						
						<!-- Nav tabs -->
						<ul class="nav nav-tabs" role="tablist" id="resource-nav-tabs" style="margin-top: 20px; padding-left: 5px;">
							<!-- Search Tab -->
							<li th:if="${haveSearchParams}" class="nav-item">
								<a href="#tab-search" role="tab" data-bs-toggle="tab" class="nav-link" id="search-tab">Search</a>
							</li>
							<li th:if="${!haveSearchParams}" class="disabled nav-item">
								<a href="#tab-search" role="tab" class="nav-link disabled">Search</a>
							</li>
							<!-- Queries Tab -->
							<li th:if="${!queries.empty}" class="nav-item">
								<a href="#tab-queries" role="tab" data-bs-toggle="tab" class="nav-link" id="queries-tab">Queries</a>
							</li>
							<li th:if="${queries.empty}" class="disabled nav-item">
								<a href="#tab-queries" role="tab" class="nav-link disabled">Queries</a>
							</li>
							<!-- CRUD Tab -->
							<li th:class="(${!haveSearchParams} and ${queries.empty}) ? 'active'" class="nav-item">
								<a href="#tab-otheractions" role="tab" data-bs-toggle="tab" name="tabCrudOperationsLink" class="nav-link" id="crud-tab">CRUD Operations</a>
							</li>
						</ul>
						<script type="text/javascript">
							$( document ).ready(function() {
								for (var i = 0; i != 4; i++){
									if (!$('#resource-nav-tabs li:eq('+i+')').hasClass('disabled')) {
										$('#resource-nav-tabs li:eq('+i+') a').tab('show');
										break;
									}
								}
							});
						</script>
						
						<!-- Tab panes -->
						<div class="card" style="top: -2px;"><div class="card-body tab-content">

							<!-- *************************************************** -->
							<!-- Search Tab -->
							<!-- *************************************************** -->
							<div class="tab-pane" id="tab-search" aria-labelledby="search-tab">
	
								<!-- Search contents -->
								<div class="container-fluid">
									<div class="row">
								    	<div class="col-sm-2" style="padding-left: 0px;">
											<button type="button" id="search-btn" class="btn btn-success btn-block">
                                    <i class="fab fa-searchengin"></i>
												Search
											</button>
										</div>
									</div>
									<script type="text/javascript">
										$('#search-btn').click(function() {
											var btn = $(this);
											handleActionButtonClick($(this));
											$('#tab-search').find('input').each(function() {
												if (this.id) {
													if (this.id.substring(0,4) == 'inc_') {
														this.name = '_include';
													} else if (this.id.substring(0,7) == 'revinc_') {
														this.name = '_revinclude';
													} else if (this.id.indexOf('autogen') == -1) {
														this.name = this.id;
													}	
												}
											});
											window.onpageshow=function(event) {
												$('#search-btn').button('reset'); // re-activate the button if the user comes back
											};
											$("#outerForm").attr("action", "search").submit();
										});
									</script>

									<br clear="all"/>
									<div class="row">
										<h4>Search Parameters <small>Optionally add parameter(s) to the search</small></h4>
									</div>
									
									<div id="search-param-rows" style="padding-left: 15px;">
										<!-- Placeholder: gets populated by script below -->
									</div>
									
									<!-- Includes -->
                           <br clear="all"/>
									<div class="row">
										<h4>Includes <small>Also include resources which are referenced by the search results</small></h4>
									</div>
                           <div class="row">
										<div class="col">
											<span th:each="include : ${includes}" class="includeCheckContainer">
												<span class="includeCheckCheck">
													<input type="checkbox" th:value="${include}" th:id="'inc_' + ${include}"></input>
												</span>
												<span class="includeCheckName" th:text="${include}"/>
											</span>
										</div>
									</div>

									<!-- Results Sorting -->
									<div class="row">
										<h4>Sort Results</h4>
									</div>
									<div class="row">
										<!-- Sort By... -->
										<div class='col'>
											<div class="d-inline-block">
												<div class="input-group">
													<label class="input-group-text">Sort By</label>
													<input type="hidden" id="sort_by" />
													<label class="input-group-text border border-primary text-primary" id="search_sort_button">Default</label>
													<button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown">
														<span class="caret"></span>
														<span class="visually-hidden">Default Sort</span>
													</button>
													<ul class="dropdown-menu" role="menu">
														<li><a href="javascript:updateSort('');" class="dropdown-item">Default Sort</a></li>
														<li class="divider"></li>
														<li th:each="nextParam : ${sortParams}"><a th:href="'javascript:updateSort(\'' + ${nextParam} + '\');'" th:text="${nextParam}" class="dropdown-item"></a></li>
													</ul>
												</div>
											</div>

											<div class="d-inline-block ms-3">
												<div class="input-group">
													<label class="input-group-text">Direction</label>
													<input type="hidden" id="sort_direction" />
													<label class="input-group-text border border-primary text-primary" id="search_sort_direction_button">Default</label>
													<button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown">
														<span class="caret"></span>
														<span class="visually-hidden">Default Sort</span>
													</button>
													<ul class="dropdown-menu" role="menu">
														<li><a href="javascript:updateSortDirection('');" class="dropdown-item">Default</a></li>
														<li class="divider"></li>
														<li><a href="javascript:updateSortDirection('asc');" class="dropdown-item">Ascending</a></li>
														<li><a href="javascript:updateSortDirection('desc');" class="dropdown-item">Descending</a></li>
													</ul>
												</div>
											</div>
										</div>
									</div>

                           <!-- Other Options -->
									<div class="row">
										<div class="col">
											<h4>Other Options</h4>
										</div>
									</div>
									
									<div class="row">
										<div class='col-sm-3'>
								            <div class="form-group">
								                <div class='input-group date'>
								                    <label class="input-group-text">Limit</label>
								                    <input type="text" class="form-control" id="resource-search-limit" placeholder="max # returned"/>
								                </div>
								            </div>
								        </div>
									</div>

									<!-- Reverse Includes -->
									<br clear="all"/>
									<div class="row">
										<h4>Reverse Includes <small>Also include resources which reference to the search results</small></h4>
									</div>									
									<div class="row">
										<span class="includeCheckContainer">
											<span class="includeCheckCheck">
												<input type="checkbox" th:value="'*'" th:id="'revinc_STAR'" />
											</span>
											<span class="includeCheckName" th:text="'*'"/>
											<span th:each="include : ${revincludes}" class="includeCheckContainer">
												<span class="includeCheckCheck">
													<input type="checkbox" th:value="${include}" th:id="'revinc_' + ${include}" />
												</span>
												<span class="includeCheckName" th:text="${include}"/>
											</span>
										</span>
									</div>
								</div>
							
							</div>
							<!-- End of search Tab -->
							
							<!-- *************************************************** -->
							<!-- Queries Tab -->
							<!-- *************************************************** -->
							<div class="tab-pane" id="tab-queries" aria-labelledby="queries-tab">
								<div th:replace="~{tmpl-queries :: queries-list}" ></div>
							</div>
							<!-- End of queries tab -->
							
							<!-- *************************************************** -->
							<!-- Other Operations Tab -->
							<!-- *************************************************** -->
							<div class="tab-pane" id="tab-otheractions" aria-labelledby="crud-tab">
								<div class="container-fluid">

								<!-- Read/VRead -->
								
									<div class="row">
                              <div class="col-12">
											<b>Read</b> an individual resource instance given its
											ID (and optionally a version ID to retrieve a specific version
											of that instance to <b>vread</b> that instance)
										</div>										
									</div>
								    <div class="row">
								    	<div class="col-sm-2">
											<button type="button" id="read-btn"
												class="btn btn-primary btn-block">
												<i class="fa fa-book"></i>
												Read
											</button>
										</div>												
										<div class='col-sm-3'>
								            <div class="form-group">
								                <div class='input-group date'>
								                    <div class="input-group-prepend">
                                               <span class="input-group-text">
                                                  ID
                                                  <span class="loadingStar">*</span>
                                               </span>
								                    </div>
								                    <input type="text" class="form-control" id="read-id"/>
								                </div>
								            </div>
								        </div>											
										<div class='col-sm-4'>
								            <div class="form-group">
								                <div class='input-group date'>
                                           <div class="input-group-prepend">
                                               <span class="input-group-text">
      								                    Version ID
                                               </span>
								                    </div>
								                    <input type="text" class="form-control" id="read-vid" placeholder="(add for vread)"/>
								                </div>
								            </div>
								        </div>											
										<script type="text/javascript">
											$('#read-btn').click(
												function() {
													var btn = $(this);
													handleActionButtonClick($(this));
													var id = $('#read-id').val();
													if (id != null) btn.append($('<input />', { type: 'hidden', name: 'id', value: id }));
													var vid = $('#read-vid').val();
													if (vid != null) btn.append($('<input />', { type: 'hidden', name: 'vid', value: vid }));
													$("#outerForm").attr("action", "read").submit();
												});
										</script>
									</div>
									<br clear="all"/>
									
								<!-- Resource History -->
								
									<div class="row">
                              <div class="col-12">
                                 Retrieve the update <b>history</b> across the <th:block th:text="${resourceName}"/> 
                                 resource type, or against a specific instance of this resource type if
                                 an ID is specified.
                              </div>
									</div>
								    <div class="row top-buffer">
								    	<div class="col-sm-2">
											<button type="button" id="resource-history-btn" class="btn btn-primary btn-block"
												name="action-history-type">
												<i class="fa fa-calendar"></i>
												History
											</button>
								    	</div>
										<div class='col-sm-3'>
								            <div class="form-group">
								                <div class='input-group date'>
                                           <div class="input-group-prepend">
                                               <span class="input-group-text">
      								                    ID
                                               </span>
								                    </div>
								                    <input type="text" class="form-control" id="resource-history-id" placeholder="(instance ID)"/>
								                </div>
								            </div>
								        </div>											
								        <div class='col-sm-5'>
								            <div class="form-group">
								                <div class='input-group date' id='resource-history-datetime' data-bs-toggledate-format="YYYY-MM-DDTHH:mm:ss">
                                           <div class="input-group-prepend">
                                               <span class="input-group-text">
      								                    Since
                                               </span>
								                    </div>
								                    <input type='text' class="form-control" id="resource-history-since" placeholder="(opt)"/>
								                    <div class="input-group-addon"> <!-- input-group-addon is from Bootstrap3 but the time picker needs it there -->
								                    <span class="glyphicon glyphicon-calendar"></span>
								                    </div>
								                </div>
								            </div>
								        </div>								        
										<div class='col-sm-2'>
								            <div class="form-group">
								                <div class='input-group date'>
                                           <div class="input-group-prepend">
                                               <span class="input-group-text">
      								                    Limit
                                               </span>
								                    </div>
								                    <input type="text" class="form-control" id="resource-history-limit" placeholder="(#)"/>
								                </div>
								            </div>
								        </div>
								        <script type="text/javascript">
								            $(function () {
								                $('#resource-history-datetime').datetimepicker({
								                	sideBySide: true,
								                	keepInvalid: true,
								                	format: 'YYYY-MM-DDTHH:mm:ssZ'
								                });
								            });
								            $('#resource-history-btn').click(function() {
													var btn = $(this);
													handleActionButtonClick($(this));
													var limit = $('#resource-history-limit').val();
													if (limit != null) btn.append($('<input />', { type: 'hidden', name: 'limit', value: limit }));
													var since = $('#resource-history-since').val();
													if (since != null) btn.append($('<input />', { type: 'hidden', name: 'since', value: since }));
													var id = $('#resource-history-id').val();
													if (id != null) btn.append($('<input />', { type: 'hidden', name: 'resource-history-id', value: id }));
													$("#outerForm").attr("action", "history-type").submit();
												});
								        </script>								        
								    </div>
									<br clear="all"/>
																	
								<!-- Delete -->
								
									<div class="row">
                              <div class="col-12">
										   <b>Delete</b> an individual instance of the resource
                              </div>
									</div>
								    <div class="row top-buffer">
								    	<div class="col-sm-2">
											<button type="button" id="resource-delete-btn" class="btn btn-primary btn-block">
												<i class="fa fa-trash-alt"></i>
												Delete
											</button>
								    	</div>
										<div class='col-sm-3'>
								            <div class="form-group">
								                <div class='input-group date'>
                                           <div class="input-group-prepend">
                                               <span class="input-group-text">
      								                    ID
                                                  <span class="loadingStar">*</span>
                                               </span>
								                    </div>
								                    <input type="text" class="form-control rounded-start" id="resource-delete-id"/>
								                </div>
								            </div>
								        </div>											
								        <script type="text/javascript">
								            $('#resource-delete-btn').click(
												function() {
													var btn = $(this);
													handleActionButtonClick($(this));
													var id = $('#resource-delete-id').val();
													if (id != null) btn.append($('<input />', { type: 'hidden', name: 'resource-delete-id', value: id }));
													$("#outerForm").attr("action", "delete").submit();
												});								            
								        </script>								        
								    </div>
									<br clear="all"/>

								<!-- Create -->

									<div class="row">
                              <div class="col-12">
                                 <b>Create</b> an instance of the resource. Generally you do not need to specify an ID
                                 but you may force the server to use a specific ID by including one.
                              </div>
									</div>
								    <div class="row top-buffer">
								    	<div class="col-sm-2">
											<button type="button" id="resource-create-btn"
												class="btn btn-primary btn-block">
												<i class="fa fa-book-open"></i>
												Create
											</button>
								    	</div>
										<div class='col-sm-3'>
								            <div class="form-group">
								                <div class='input-group date'>
                                           <div class="input-group-prepend">
                                               <span class="input-group-text">
      								                    ID
                                               </span>
								                    </div>
								                    <input type="text" class="form-control" id="resource-create-id" placeholder="(optional)"/>
								                </div>
								            </div>
								        </div>											
										<div class='col-sm-7'>
								            <div class="form-group">
								                <div class='input-group date'>
                                           <div class="input-group-prepend">
                                               <span class="input-group-text">
      								                     Contents
								                           <span class="loadingStar">*</span>
                                               </span>
								                    </div>
								                    <textarea class="form-control" id="resource-create-body" style="white-space: nowrap; overflow: auto;" placeholder="(place resource body here)" rows="1"></textarea>
								                </div>
								            </div>
								        </div>											
								        <script type="text/javascript">
							        		var textAreaChanger = function() {
							        			createBodyOriginalHeight = $('#resource-create-body').height();
							        			$('#resource-create-body').animate({height: "200px"}, 500);
							        		}								        	
								        	$('#resource-create-body').focus(textAreaChanger);
								            $('#resource-create-btn').click(
												function() {
													var btn = $(this);
													handleActionButtonClick($(this));
													var id = $('#resource-create-id').val();
													if (id != null) btn.append($('<input />', { type: 'hidden', name: 'resource-create-id', value: id }));
													var body = $('#resource-create-body').val();
													btn.append($('<input />', { type: 'hidden', name: 'resource-create-body', value: body }));
													$("#outerForm").attr("action", "create").attr("method", "POST").submit();
												});		
											$( document ).ready(function() {
												if ($('#resource-create-id').val() != "") {
													buttonChanger();
													textAreaChanger();
													$('#resource-create-body').focus();
												}
											});
								        </script>								        
								    </div>
									<br clear="all"/>

								<!-- Update -->
								
									<div class="row">
                              <div class="col-12">
   										<b>Update</b> an existing instance of the resource by ID.
                              </div>
									</div>
								    <div class="row top-buffer">
								    	<div class="col-sm-2">
											<button type="button" id="resource-update-btn" class="btn btn-primary btn-block">
												<i class="fa fa-book-open"></i>
												Update
											</button>
								    	</div>
										<div class='col-sm-3'>
								            <div class="form-group">
								                <div class='input-group date'>
                                           <div class="input-group-prepend">
                                            <span class="input-group-text">
   									                  ID
                                                <span class="loadingStar">*</span>
                                             </span>
								                   </div>
                                           <input type="text" class="form-control" id="resource-update-id" placeholder="(resource ID)" th:value="${updateResourceId}"/>
								                </div>
								            </div>
								        </div>											
										<div class='col-sm-7'>
								            <div class="form-group">
								                <div class='input-group date'>
                                           <div class="input-group-prepend">
                                               <span class="input-group-text">
								                           Contents
                                                   <span class="loadingStar">*</span>
                                               </span>
								                    </div>
								                    <textarea class="form-control" id="resource-update-body" style="white-space: nowrap; overflow: auto;" placeholder="(place resource body here)" rows="1"><th:block th:if="${updateResource} != null" th:text="${updateResource}"/></textarea>
								                </div>
								            </div>
								        </div>											
								        <script type="text/javascript">
							        		var textAreaChanger = function() {
							        			updateBodyOriginalHeight = $('#resource-update-body').height();
							        			$('#resource-update-body').animate({height: "200px"}, 500);
							        		}								        	
								        	$('#resource-update-body').focus(textAreaChanger);
								            $('#resource-update-btn').click(
												function() {
													var btn = $(this);
													handleActionButtonClick($(this));
													var id = $('#resource-update-id').val();
													// Note we're using resource-create-id even though this is an update because
													// the controller expects that...
													if (id != null) btn.append($('<input />', { type: 'hidden', name: 'resource-create-id', value: id }));
													var body = $('#resource-update-body').val();
													btn.append($('<input />', { type: 'hidden', name: 'resource-create-body', value: body }));
													$("#outerForm").attr("action", "update").attr("method", "POST").submit();
												});		
											$( document ).ready(function() {
												if ($('#resource-update-id').val() != "") {
													buttonChanger();
													textAreaChanger();
													$('#resource-update-body').focus();
												}
											});
								        </script>								        
								    </div>
									<br clear="all"/>

								<!-- Validate -->
								
									<div class="row">
                              <div class="col-12">
                                 <b>Validate</b> an instance of the resource to check whether it
                                 would be acceptable for creating/updating, without actually
                                 storing it on the server.
                              </div>
									</div>
								    <div class="row top-buffer">
								    	<div class="col-sm-2">
											<button type="button" id="resource-validate-btn" class="btn btn-primary btn-block">
												<i class="fa fa-thumbs-up"></i>
												Validate
											</button>
								    	</div>
										<div class='col-sm-10'>
								            <div class="form-group">
								                <div class='input-group date'>
                                           <div class="input-group-prepend">
                                               <span class="input-group-text">
      								                     Contents
								                           <span class="loadingStar">*</span>
                                               </span>
								                    </div>
								                    <textarea class="form-control" id="resource-validate-body" style="white-space: nowrap; overflow: auto;" placeholder="(place resource body here)" rows="1"></textarea>
								                </div>
								            </div>
								        </div>											
								        <script type="text/javascript">
								        	$('#resource-validate-body').focus(
								        		function() {
								        			validateBodyOriginalHeight = $('#resource-validate-body').height();
								        			$('#resource-validate-body').animate({height: "200px"}, 500);
								        		});
								            $('#resource-validate-btn').click(
												function() {
													var btn = $(this);
													handleActionButtonClick($(this));
													var body = $('#resource-validate-body').val();
													btn.append($('<input />', { type: 'hidden', name: 'resource-validate-body', value: body }));
													$("#outerForm").attr("action", "validate").attr("method", "POST").submit();
												});								            
								        </script>								        
								    </div>

								</div>
							</div>
							<!-- End of other operations tab -->


                  </div></div>
						<!-- End of tab pane -->
						
				</div>
			</div>
		</div>

	</form>
	<div th:replace="~{tmpl-footer :: footer}" ></div>

	<!-- 
	<script type="text/javascript">
		$(function () { $("[data-bs-toggle='tooltip']").tooltip(); });
	</script>
	-->	
</body>
</html>
